<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md15">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-header">公告管理</div>
                                <br>
                                <form class="layui-row layui-form " style="display: flex;flex-direction: row" action="">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">查询类型</label>
                                        <div class="layui-input-block " id="audio">
                                            <input name="vType" title="所有" type="radio" checked="" lay-filter="vType"
                                                   value="0">
                                            <input name="vType" title="教师PC" type="radio" lay-filter="vType" value="1">
                                            <input name="vType" title="教师Android" type="radio" lay-filter="vType"
                                                   value="2">
                                            <input name="vType" title="学生IOS" type="radio" lay-filter="vType" value="3">
                                            <input name="vType" title="学生Android" type="radio" lay-filter="vType"
                                                   value="4">
                                            <input name="vType" title="其他" type="radio" lay-filter="vType" value="5">
                                        </div>
                                    </div>
                                </form>
                                <div class="layui-card-body">
                                    <table id="codeTable" lay-filter="codeTable"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<div class="layui-content" id="updateBox" style="display: none">

    <div class="layui-card-header">新增公告</div>
    <form class="layui-form layui-card-body" action=""  lay-filter="updateBox">
        <div class="layui-form-item">
            <label class="layui-form-label">类型：</label>
            <div class="layui-input-block " id="updateType">
                <input name="updateNotice" title="所有" type="radio" checked="" lay-filter="updateNotice"
                       value="0">
                <input name="updateNotice" title="教师PC" type="radio" lay-filter="updateNotice" value="1">
                <input name="updateNotice" title="教师Android" type="radio" lay-filter="updateNotice"
                       value="2">
                <input name="updateNotice" title="学生IOS" type="radio" lay-filter="updateNotice" value="3">
                <input name="updateNotice" title="学生Android" type="radio" lay-filter="updateNotice"
                       value="4">
                <input name="updateNotice" title="其他" type="radio" lay-filter="updateNotice" value="5">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标题：</label>
            <div class="layui-input-block">
                <input name="updateTitle" class="layui-input" type="text" placeholder="请输入标题" autocomplete="off"
                       lay-verify="updateTitle" id="updateTitle">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">内容：</label>
            <div class="layui-input-block">
                <textarea name="updateDesc" id="updateDesc" lay-filter="updateDesc" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>


    </form>

    <div class="layui-row layui-col-space12">
        <div class="layui-col-md12" style="text-align: center">
            <div class="layui-card-body" id="message">

            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block" style="float: right;right: 50px">
            <a class="layui-btn layui-btn-blue" id="saveNotice" onclick="saveNotice()" lay-submit
               lay-filter="saveNotice">保存</a>
        </div>
    </div>


</div>


<div class="layui-content" id="addCodeBox" style="display: none">

    <div class="layui-card-header">新增公告</div>
    <form class="layui-form layui-card-body" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">类型：</label>
            <div class="layui-input-block " id="addNotice">
                <input name="addNotice" title="所有" type="radio" checked="" lay-filter="addNotice"
                       value="0">
                <input name="addNotice" title="教师PC" type="radio" lay-filter="addNotice" value="1">
                <input name="addNotice" title="教师Android" type="radio" lay-filter="addNotice"
                       value="2">
                <input name="addNotice" title="学生IOS" type="radio" lay-filter="addNotice" value="3">
                <input name="addNotice" title="学生Android" type="radio" lay-filter="addNotice"
                       value="4">
                <input name="addNotice" title="其他" type="radio" lay-filter="addNotice" value="5">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标题：</label>
            <div class="layui-input-block">
                <input name="noticeTitle" class="layui-input" type="text" placeholder="请输入标题" autocomplete="off"
                       lay-verify="noticeTitle" id="noticeTitle">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">内容：</label>
            <div class="layui-input-block">
                <textarea name="desc" id="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>


    </form>

    <div class="layui-row layui-col-space12">
        <div class="layui-col-md12" style="text-align: center">
            <div class="layui-card-body" id="message">

            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block" style="float: right;right: 50px">
            <a class="layui-btn layui-btn-blue" id="submitNotice" onclick="submitNotice()" lay-submit
               lay-filter="submitNotice">立即添加</a>
        </div>
    </div>


</div>


<script id="toolbarDemo" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-primary" onclick="addCode()"><i class="layui-icon">&#xe608;</i>
            添加公告
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="refresh()"><i class="layui-icon">&#xe9aa;</i>
            刷新
        </button>
    </div>
</script>
<script id="switchTpl" type="text/html">
    <input type="checkbox" name="status" value="{{d.id}}"  lay-skin="switch" lay-text="是|否" lay-filter="statusBox" {{ d.top == "1" ? 'checked' : '' }} >
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="editNotice"><i class="layui-icon">&#xe642;</i>编辑</a>
    <a class="layui-btn layui-btn-xs  layui-btn-danger" lay-event="delNotice">删除</a>
</script>
<script>
    var startInter = api.bbs;
    var audio = 0;//初始化查询身份为教师,与当前的时间
    var type = /^[1-9]\d*$/;
    var vid, noticeTitle, noticeType, noticeDesc;
    $(document).ready(function () {
        $("#search").click(function () {
            getStartUp();
        });
        cs = $("#cs").val();
        active = "";
        keyword = $("#keyword").val();
        audio = $("input[name='code']:checked").val();
        layui.use(['form', 'table', 'laydate'], function () {
            var form = layui.form
                , layer = layui.layer
                , laydate = layui.laydate;


            //监听单选框的值
            form.on("radio(vType)", function (data) {
                audio = data.value;
                getStartUp();

            });
            //监听筛选的选择框
            form.on("select(cs)", function (data) {
                cs = data.value;
                getStartUp();
            });
            //监听active的值
            form.on('select(active)', function (data) {
                if (data.value == "10") {
                    active = "";
                }
                else {
                    active = data.value;
                }

                getStartUp();
            });


            $("#keyword").bind('input propertychange', function () {
                keyword = $("#keyword").val();
                getStartUp();
            });
            form.render();
        });
        getStartUp();
    });
    function addCode() {
        personWin = layer.open({
            type: 1,
            shade: false,
            area: ['60%', '50%'], //宽高
            title: false, //不显示标题
            content: $('#addCodeBox'),
            cancel: function () {
                document.getElementById("addCodeBox").style.display = "none";
            }
        });
    }

    function refresh() {
        getStartUp();
    }

    //获取启动次数的数据
    function getStartUp() {
        if(audio==undefined){
            audio=0;
        }
        layui.use('table', function () {
            var table = layui.table,
                form = layui.form;
            //第一个实例
            table.render({
                elem: '#codeTable'
                , url: startInter //数据接口
                , title: '版本列表数据'
                , page: true //开启分页
                , toolbar: "#toolbarDemo"
                , method: 'post'
                , totalRow: true
                , limit: 20
                , limits: [20, 40, 60, 100]
                , where: {
                    action: "listBbs",
                    type: audio,
                }
                , cols: [[ //表头
                    {field: 'index', title: '序号', fixed: 'left', type: 'numbers', toolbar: "#tableId"}
                    , {field: 'type', title: '类型', width: 150, toolbar: "#typeTool"}
                    , {field: 'title', title: '标题', width: 250}
                    , {field: 'content', title: '内容'}
                    , {field: 'date', title: '创建时间', width: 200, toolbar: "#createTime"}
                    , {field: 'top', title: '是否置顶', width: 150,templet: '#switchTpl', unresize: true}
                    , {field: '', toolbar: '#barDemo', title: '操作'}
                ]]
                , done: function (res, curr, count) {
                    if (res.count == 0) {
                        layer.msg("没有符合条件的数据哦");
                    }
                }

            });
            //监听是否置顶的操作
            form.on('switch(statusBox)', function (obj) {
                var top="";
                if (obj.elem.checked) {
                    top="1";
                    layer.tips("已开启", obj.othis);
                    updateActive(this.value, top, obj);
                }
                else {
                    layer.tips("已禁用", obj.othis);
                    top="0";
                    updateActive(this.value, top, obj);
                }


            });
            //监听行工具事件
            table.on('tool(codeTable)', function (obj) {
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'editNotice') {
                    vid =data.id;//获取当前一行的id
                    noticeTitle=data.title;
                    noticeDesc=data.content;
                    noticeType=data.type;
                    updateNotice();
                }
                else if(layEvent==='delNotice'){
                    $id=data.id;
                    layer.confirm("确定丢弃吗？",function () {
                        delNotice($id);
                    });


                }
            });

        });

    }

    //新增】公告信息
    function submitNotice() {
        var addNotice = $("input[name='addNotice']:checked").val(),
            noticeTitle = $("#noticeTitle").val(),
            desc = $("#desc").val();

        if (noticeTitle.length > 0 && desc.length > 0) {
            $.ajax({
                type: "post",
                cache: "false",
                url: startInter,
                data: {
                    "action": "addBbs",
                    "title": noticeTitle,
                    "content": desc,
                    "type": addNotice,
                },
                dataType: 'json',
                success: function (res) {

                    if (res.code == "0") {
                        layer.msg('添加成功！', {time: 5000, icon: 6});
                        $("#addCodeBox").css({"display": "none"});
                        parent.layer.close(personWin);
                        getStartUp();
                    }
                    else {
                        layer.msg(res.msg);

                    }

                },
                error: function (res) {
                    console.log(res);
                    layer.msg("添加失败");
                }


            })


        }
        else {

            layer.msg('还有必填项没有填或填写错误哦！', {time: 5000, icon: 0});


        }



    }
    //修改公告信息
    function  updateNotice(){
        personWin = layer.open({
            type: 1,
            shade: false,
            area: ['50%', '50%'], //宽高
            title: false, //不显示标题
            content: $('#updateBox'),
            cancel: function () {
                document.getElementById("updateBox").style.display = "none";
            }
        });

        //表单初始赋值
        layui.use('form', function () {
            var form = layui.form;
            form.val('updateBox', {
                "updateTitle": noticeTitle,
                "updateDesc": noticeDesc,
                "updateNotice":noticeType
            })

        })


    }
    //保存公告信息
    function saveNotice() {
        $title = $("#updateTitle").val();
        $type = $("input[name='updateNotice']:checked").val();
        $desc = $("#updateDesc").val();
        if ($title.length > 0 && $desc.length > 0) {
            $.ajax({
                type: 'post',
                cache: "false",
                url: startInter,
                data: {
                    "action": "editBbs",
                    "id":vid,
                    "title":$title,
                    "content":$desc,
                }
                ,dataType: "json",
                success:function (res) {
                    if(res.code==0){
                        layer.msg('成功保存！', {time: 5000, icon: 6});
                        $("#updateBox").css({"display": "none"});
                        parent.layer.close(personWin);

                    }
                    else {
                        layer.msg(res.msg);
                    }

                },
                error:function (res) {
                    layer.msg('保存失败！', {time: 5000, icon: 0});
                }


            })
        }
        else {
            layer.msg('还有必填项没有填或填写错误哦！', {time: 5000, icon: 0});

        }


    }
    //删除公告信息
    function delNotice(delId) {
        $.ajax({
            type: 'post',
            cache: "false",
            url: startInter,
            data: {
                "action": "deleteBbs",
                "id":delId,

            }
            ,dataType: "json",
            success:function (res) {
                if(res.code==0){
                    layer.msg('成功删除！', {time: 5000, icon: 6});
                    getStartUp();
                }
                else {
                    layer.msg(res.msg);
                }

            },
            error:function (res) {
                layer.msg("操作失败",{time: 5000, icon: 0});
            }


        })
    }


    //状态修改
    function updateActive(id, val, obj) {

        $.ajax({
            type: "post",
            url: startInter,
            data: {
                "action":"topBbs",
                "id": id,
                "top": val,
            },
            dataType: "json",
            success: function (res) {
                if(res.code !=0){
                    layer.tips(res.msg, obj.othis);
                }
            },
            error: function (res) {
                layer.tips("操作失败", obj.othis);
                window.location.reload();
            }
        });
    }
</script>

<!--//有效时间-->
<script type="text/html" id="createTime">
    <a style="color: #787878" class="layui-table-link">{{to_date(d.date)}}</a>
</script>
<!--//类型-->

<script type="text/html" id="typeTool">
    {{#  if(d.type =="0"){ }}
    <a style="color: #787878" class="layui-table-link">所有</a>
    {{#  } }}
    {{#  if(d.type =="1"){ }}
    <a style="color: #787878" class="layui-table-link">教师PC</a>
    {{#  } }}
    {{#  if(d.type =="2"){ }}
    <a style="color: #787878" class="layui-table-link">教师Android</a>
    {{#  } }}
    {{#  if(d.type =="3"){ }}
    <a style="color: #787878" class="layui-table-link">学生IOS</a>
    {{#  } }}
    {{#  if(d.type =="4"){ }}
    <a style="color: #787878" class="layui-table-link">学生Android</a>
    {{#  } }}
    {{#  if(d.type !="4" && d.type!="3" && d.type!=2 && d.type !="1" && d.type!="0"){ }}
    <a style="color: #787878" class="layui-table-link">其他</a>
    {{#  } }}

</script>

<script type="text/html" id="isTop">
    {{#  if(d.top =="0"){ }}
    <a style="color: #787878" class="layui-table-link">否</a>
    {{#  } }}
    {{#  if(d.top =="1"){ }}
    <a style="color: #787878" class="layui-table-link">是</a>
    {{#  } }}

</script>